<template>
  <el-card>
    <el-table v-bind="$attrs" :border="$attrs.border == undefined ? true : $attrs.border" style="width: 100%"
      v-loading="isLoading" :max-height="$attrs.maxHeight || '600px'" :data="tableData"
      :header-cell-style="getMytableHeaderClassName">
      <slot></slot>
    </el-table>
    <el-pagination class="pagination" v-model:current-page="currentPage" layout="sizes , prev, pager, next,jumper"
      :page-sizes="[12, 20, 50, 100]" :total="itemCount" v-model:page-size="limit" hide-on-single-page />
  </el-card>
</template>

<script setup>
import { BASE_URL } from "@/libs/constants";
import { $http } from "@/api";
import { ref, watchEffect } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  url: String, //url
  params: Object, //请求参数
  method: {
    //请求方式
    type: String,
    default: "GET",
  },
});

// ----------------------------------------------分页区域
// 当前页
const currentPage = ref(1);
// limit
const limit = ref(12);
// 数据总数
const itemCount = ref(0);

// -----------------------------------------------------表格区域

// 是否显示加载状态
const isLoading = ref(false);

// 表头样式回调函数
const getMytableHeaderClassName = () => ({
  background: "#fafafa",
});

// 表格数据
const tableData = ref([]);

// 渲染表格
function render() {
  isLoading.value = true;
  $http[props.method.toLowerCase()](BASE_URL + "/api/" + props.url, {
    ...props.params,
    page: currentPage.value,
    limit: limit.value,
  })
    .then((res) => {
      if (res.code === 0) {
        tableData.value = res.data;
        itemCount.value = res.count;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    })
    .finally(() => {
      isLoading.value = false;
    });
}
// 监听变量
watchEffect(() => {
  render();
});
</script>

<style lang="less" scoped>
.pagination {
  border: 1px solid #ebeef5;
  border-top: none;
  height: 40px;
  padding-left: 5px;
}
</style>
<style >
.myTableHeader {
  background: #fafafa;
}
</style>